<template>
    <view class="search-page">
        <!-- 搜索框部分 -->
        <view class="search-header">
            <text class="back-btn" @click="goBack">返回</text>
            <view class="search-input-box">
                <input type="text" v-model="searchKeyword" placeholder="搜索附近的商家、商品" @confirm="handleSearch"/>
            </view>
            <text class="search-btn" @click="handleSearch">搜索</text>
        </view>

        <!-- 热门搜索部分 -->
        <view class="hot-search">
            <view class="section-title">热门搜索</view>
            <view class="search-tags">
                <view class="tag hot" @click="useHistoryItem('限时抢购')">
                    <text class="hot-icon">热</text>
                    <text>限时抢购</text>
                </view>
                <view class="tag" v-for="(item, index) in hotSearchList" :key="index" @click="useHistoryItem(item)">
                    {{item}}
                </view>
            </view>
        </view>

        <!-- 搜索历史部分 -->
        <view class="search-history" v-if="searchHistory.length > 0">
            <view class="history-header">
                <text class="section-title">搜索历史</text>
                <text class="clear-btn" @click="clearHistory">清空历史</text>
            </view>
            <view class="history-list">
                <view class="history-item" v-for="(item, index) in searchHistory" :key="index" @click="useHistoryItem(item)">
                    {{item}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchKeyword: '',
            searchHistory: [],
            hotSearchList: ['莲花清温胶囊', '口罩', '鸡蛋', '儿童口罩', '酒精', '莲花清瘟', '姜', '蒜', '葱', '菠菜']
        }
    },
    onLoad() {
        // 获取本地存储的搜索历史
        const history = uni.getStorageSync('searchHistory')
        if (history) {
            this.searchHistory = JSON.parse(history)
        }
    },
    methods: {
        handleSearch() {
            if (!this.searchKeyword.trim()) return
            
            // 将搜索关键词添加到历史记录
            if (!this.searchHistory.includes(this.searchKeyword)) {
                this.searchHistory.unshift(this.searchKeyword)
                if (this.searchHistory.length > 10) {
                    this.searchHistory.pop()
                }
                // 保存到本地存储
                uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory))
            }
            
            // 跳转到搜索结果页面
            uni.navigateTo({
                url: `/pages/search-result/search-result?keyword=${encodeURIComponent(this.searchKeyword)}`
            })
        },
        useHistoryItem(keyword) {
            this.searchKeyword = keyword
            this.handleSearch()
        },
        clearHistory() {
            this.searchHistory = []
            uni.removeStorageSync('searchHistory')
        },
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style>
.search-page {
    padding: 20rpx;
}

.search-header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
}

.back-btn {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
}

.search-input-box {
    flex: 1;
    background-color: #F5F5F5;
    border-radius: 32rpx;
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
}

.search-input-box input {
    height: 60rpx;
    font-size: 28rpx;
}

.search-btn {
    font-size: 28rpx;
    color: #333;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0 20rpx;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.tag {
    padding: 10rpx 20rpx;
    background-color: #F5F5F5;
    border-radius: 32rpx;
    font-size: 24rpx;
}

.tag.hot {
    color: #FF4444;
    display: flex;
    align-items: center;
}

.hot-icon {
    background-color: #FF4444;
    color: white;
    padding: 2rpx 8rpx;
    border-radius: 4rpx;
    margin-right: 8rpx;
    font-size: 20rpx;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-btn {
    font-size: 24rpx;
    color: #999;
}

.history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 20rpx;
}

.history-item {
    padding: 10rpx 20rpx;
    background-color: #F5F5F5;
    border-radius: 32rpx;
    font-size: 24rpx;
}
</style> 